<script setup>
import { ref, reactive } from 'vue';
import { ElDialog, ElForm, ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus';

const tasks = ref([
  {
    id: 1,
    title: '完成项目文档',
    status: 'in-progress',
    priority: 'high',
    dueDate: '2024-03-20'
  },
  {
    id: 2,
    title: '代码审查',
    status: 'completed',
    priority: 'medium',
    dueDate: '2024-03-18'
  }
]);

const dialogVisible = ref(false);
const isEdit = ref(false);
const taskForm = reactive({
  id: null,
  title: '',
  status: 'in-progress',
  priority: 'medium',
  dueDate: ''
});

const getPriorityType = (priority) => {
  const types = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  };
  return types[priority];
};

const getPriorityLabel = (priority) => {
  const labels = {
    high: '高',
    medium: '中',
    low: '低'
  };
  return labels[priority];
};

const handleAdd = () => {
  isEdit.value = false;
  Object.assign(taskForm, {
    id: null,
    title: '',
    status: 'in-progress',
    priority: 'medium',
    dueDate: ''
  });
  dialogVisible.value = true;
};

const handleEdit = (row) => {
  isEdit.value = true;
  Object.assign(taskForm, row);
  dialogVisible.value = true;
};

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这个任务吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tasks.value.findIndex(task => task.id === row.id);
    if (index !== -1) {
      tasks.value.splice(index, 1);
      ElMessage.success('删除成功');
    }
  });
};

const handleSave = () => {
  if (!taskForm.title) {
    ElMessage.warning('请输入任务名称');
    return;
  }

  if (isEdit.value) {
    const index = tasks.value.findIndex(task => task.id === taskForm.id);
    if (index !== -1) {
      tasks.value[index] = { ...taskForm };
    }
  } else {
    taskForm.id = Date.now();
    tasks.value.push({ ...taskForm });
  }

  dialogVisible.value = false;
  ElMessage.success(isEdit.value ? '更新成功' : '创建成功');
};
</script>


<template>
  <div class="tasks-container">
    <ElCard>
      <template #header>
        <div>
          <span>任务管理</span>
          <ElButton type="primary" @click="handleAdd">新建任务</ElButton>
        </div>
      </template>
      <ElTable :data="tasks" style="width: 100%;">
        <ElTableColumn prop="title" label="任务管理"></ElTableColumn>
        <ElTableColumn prop="status" label="状态">
          <template #default="{ row }">
            <ElTag :type="row.status === 'completed' ? 'success' : 'warning'">
              {{ row.status === 'completed' ? '已完成' : '进行中' }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="dueDate" label="截止日期"></ElTableColumn>
        <ElTableColumn label="操作" width="200">
          <template #default="{ row }">
            <ElButton size="small" @click="handleEdit(row)">编辑</ElButton>
            <ElButton size="small" type="danger">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </ElCard>
    <ElDialog v-model="dialogVisible" :title="isEdit ? '编辑任务' : '新建任务'" width="500px">
      <ElForm :model="taskForm" label-width="100px">
        <el-form-item label="任务名称">
          <el-input v-model="taskForm.title" />
        </el-form-item>
        <el-form-item label="优先级">
          <ElSelect v-model="taskForm.priority">
            <ElOption label="高" value="high"></ElOption>
            <ElOption label="中" value="medium"></ElOption>
            <ElOption label="低" value="low"></ElOption>
          </ElSelect>
        </el-form-item>
        <el-form-item label="状态">
          <ElSelect v-model="taskForm.status">
            <ElOption label="进行中"  value="in-progress" ></ElOption>
            <ElOption label="完成" value="completed"></ElOption>
          </ElSelect>
        </el-form-item>
      </ElForm>
    </ElDialog>
  </div>

</template>
